<template>
  <div class="welPage">
    <div class="demo">
      <div class="title">凭证服务地址设置</div>
      <div class="content">
        <div class="select">
          <span>地址栏：</span>
          <el-input
            v-model="localHost"
            placeholder="请输入"
            style="width: 860px"
          ></el-input>
        </div>
        <div class="btns">
          <el-button @click="importHost">导入秘钥</el-button>
          <el-button @click="connectHost">连接</el-button>
          <el-button @click="offHost">断开</el-button>
        </div>
      </div>
    </div>

    <div class="tabLists">
      <div class="tabs">
        <div class="list-item">凭证查询</div>
      </div>

      <div class="list3-content">
        <div class="content-one">
          <div class="title">查询条件(凭证号有值不再过滤日期)：</div>
          <div class="content">
            <div class="select">
              <span class="labelspan">凭证日期：</span>
              <el-date-picker
                v-model="voucherDate"
                type="date"
                style="width: 150px"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
            <div class="select">
              <span class="labelspan">凭证号：</span>
              <el-input
                class="selectBox"
                v-model="voucherNo"
                placeholder="请输入凭证号"
              ></el-input>
            </div>
            <div class="select"></div>
            <div class="btns">
              <el-button @click="searchValidate">查询凭证</el-button>
            </div>
          </div>
        </div>
        <div class="content-one" style="margin-top: 10px">
          <div class="title">过滤条件(对查询到的结果集按条件筛选)：</div>
          <div class="content">
            <div class="select">
              <span class="labelspan">行政区划：</span>
              <el-select
                class="selectBox"
                v-model="admDivCode"
                placeholder="请选择行政区划"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="select">
              <span class="labelspan">业务年度：</span>
              <el-select
                class="selectBox"
                v-model="stYear"
                placeholder="请选择业务年度"
              >
                <el-option
                  v-for="item in yearOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="select">
              <span class="labelspan">凭证类型：</span>
              <el-select
                class="selectBox"
                v-model="vtCode"
                placeholder="请选择业务年度"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="btns">
              <el-button @click="refreshList">刷新列表</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tableLists">
      <div class="left-table">
        <div class="title">凭证号列表(选择后刷新版本)</div>
        <div class="contentss">
          <el-table
            border
            :data="codeLists"
            style="width: 250px"
            :row-class-name="highlightRow"
            @row-click="handleRowClick"
          >
            <el-table-column type="index"  width="50"> </el-table-column>
            <el-table-column prop="voucher_no" label="凭证号"  width="200">
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
            <el-button @click="showModal" size="small">查看凭证</el-button>
            <el-button @click="changePage('left')" size="small">上一页</el-button>
            <el-button @click="changePage('right')" size="small">下一页</el-button>
        </div>
      </div>
      <div class="right-table">
        <div class="top-table">
          <div class="title">
            凭证版本列表(选择后刷新签章、签名列表及发送列表，S标记为状态字段)
          </div>
          <div class="contents">
            <el-table
              border
              :data="tableDataLeft"
              style="width: 100%"
              @row-click="handleRowClick"
            >
              <el-table-column prop="sign_no" label="版本号"></el-table-column>
              <el-table-column
                prop="sign_time"
                label="入库时间"
                width="150"
              ></el-table-column>
              <el-table-column prop="is_cancel" label="有效S"></el-table-column>
              <el-table-column
                prop="send_status"
                label="版本号"
              ></el-table-column>
              <el-table-column prop="sign_no" label="发送S"></el-table-column>
              <el-table-column
                prop="download_status"
                label="读取S"
              ></el-table-column>
              <el-table-column prop="is_return" label="单据S"></el-table-column>
              <el-table-column
                prop="is_out_data"
                label="内外部S"
              ></el-table-column>
              <el-table-column
                prop="sign_receive_status"
                label="签收S"
              ></el-table-column>
              <el-table-column
                prop="return_reason"
                label="备注"
                width="150"
              ></el-table-column>
              <el-table-column prop="print_time" label="打印次数">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="bottom-table">
          <div class="title">凭证签章、签名列表(带位置)</div>
          <div class="contents">
            <el-table
              border
              :data="tableDataRight"
              style="width: 100%"
              @row-click="handleRowClick"
            >
              <el-table-column prop="sign_type" label="类型"></el-table-column>
              <el-table-column
                prop="stamp_no"
                label="位置编号"
              ></el-table-column>
              <el-table-column
                prop="stamp_name"
                label="位置名称"
              ></el-table-column>
              <el-table-column prop="stamp_sn" label="位置ID" width="300"></el-table-column>
              <el-table-column prop="stamp_status" label="是否发送">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- :closable="false" -->

    <a-modal
      title="查看凭证"
      :visible="visible"
      :footer="null"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>{{ ModalText }}</p>
    </a-modal>
  </div>
</template>
<script>
import { getData, getTable } from '@/api/license/index.js'
export default {
  data() {
    return {
      // 地址栏
      localHost: null,
      // 凭证日期
      voucherDate: null,
      // 凭证号
      voucherNo: null,
      // 行政区划
      admDivCode: null,
      cityOptions: [],
      // 业务年度
      stYear: null,
      yearOptions: [],
      // 凭证类型
      vtCode: null,
      typeOptions: [],
      // 凭证号列表
      codeLists: [],
      // 原始数据
      originLists: [],
      // 凭证号表格配置项
      codeColumns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index'
        },
        {
          title: '凭证号',
          dataIndex: 'voucher_no',
          key: 'voucher_no'
        }
      ],
      // 凭证号表格分页
      page: {
        total: 10,
        current: 1,
        size: 10,
        pages: 1
      },
      // 凭证号列表选中项
      currentRow: null,
      // 凭证版本列表
      tableDataLeft: [],
      // 凭证版本列表配置项
      leftColumns: [
        {
          title: '版本号',
          dataIndex: 'sign_no',
          key: 'sign_no'
        },
        {
          title: '入库时间',
          dataIndex: 'sign_time',
          key: 'sign_time'
        },
        {
          title: '有效S',
          dataIndex: 'is_cancel',
          key: 'is_cancel'
        },
        {
          title: '发送S',
          dataIndex: 'send_status',
          key: 'send_status'
        },
        {
          title: '读取S',
          dataIndex: 'download_status',
          key: 'download_status'
        },
        {
          title: '单据S',
          dataIndex: 'is_return',
          key: 'is_return'
        },
        {
          title: '内外部S',
          dataIndex: 'is_out_data',
          key: 'is_out_data'
        },
        {
          title: '签收S',
          dataIndex: 'sign_receive_status',
          key: 'sign_receive_status'
        },
        {
          title: '备注',
          dataIndex: 'return_reason',
          key: 'return_reason'
        },
        {
          title: '打印次数',
          dataIndex: 'print_time',
          key: 'print_time'
        }
      ],
      // 凭证签章、签名列表
      tableDataRight: [],
      // 凭证签章、签名列表配置项
      rightColumns: [
        {
          title: '类型',
          dataIndex: 'sign_type',
          key: 'sign_type'
        },
        {
          title: '位置编号',
          dataIndex: 'stamp_no',
          key: 'stamp_no'
        },
        {
          title: '位置名称',
          dataIndex: 'stamp_name',
          key: 'stamp_name'
        },
        {
          title: '位置ID',
          dataIndex: 'stamp_sn',
          key: 'stamp_sn'
        },
        {
          title: '是否发送',
          dataIndex: 'stamp_status',
          key: 'stamp_status'
        }
      ],
      // 查看凭证弹窗
      visible: false,
      ModalText: '这是凭证......'
    }
  },
  created() {
    const year = new Date().getFullYear()
    const month = new Date().getMonth() + 1
    const date = new Date().getDate()
    this.voucherDate =
      year +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (date < 10 ? '0' + date : date)
    // this.localHost = localStorage.getItem('keyCode')
  },
  methods: {
    // 添加index索引
    addIndexToItems(array) {
      array.forEach((item, index) => {
        item.index = index + 1
      })
      return array
    },
    // 查询凭证
    searchValidate() {
      const params = {
        voucherDate: this.voucherDate,
        voucherNo: this.voucherNo
      }
      getData(params).then((res) => {
        const datas = res.data
        // const listsss = this.addIndexToItems(datas.data)
        this.originLists = datas.data.map((item) => {
          return {
            id: Math.random(),
            ...item
          }
        })
        // 凭证表格数据
        this.codeLists = this.paginate(this.originLists, this.page.current)
        // 分页数
        this.page.pages = Math.ceil(this.originLists.length / 10)
        // 凭证表格默认第一行选中高亮
        this.currentRow = this.codeLists[0].id
        // 行政区划下拉选项
        const uniqueCodes = new Set(datas.data.map((item) => item.admdivcode))
        this.cityOptions = Array.from(uniqueCodes).map((admdivcode) => ({
          label: admdivcode,
          value: admdivcode
        }))
        // 行政区划默认值
        this.admDivCode = this.cityOptions[0].value

        // 业务年度下拉选项
        const uniqueYears = new Set(datas.data.map((item) => item.styear))
        this.yearOptions = Array.from(uniqueYears).map((styear) => ({
          label: styear,
          value: styear
        }))
        // 业务年度默认值
        this.stYear = this.yearOptions[0].value

        // 凭证类型下拉选项
        const uniqueVtcode = new Set(datas.data.map((item) => item.vt_code))
        this.typeOptions = Array.from(uniqueVtcode).map((vt_code) => ({
          label: vt_code,
          value: vt_code
        }))
        // 凭证类型默认值
        this.vtCode = this.typeOptions[0].value
        setTimeout(() => {
          // 凭证签章、签名列表 凭证版本列表两个表格数据
          this.refreshList()
        }, 50)
      })
    },
    // 刷新列表
    refreshList() {
      const params = {
        admDivCode: this.admDivCode,
        voucherNo: this.voucherNo,
        stYear: this.stYear,
        vtCode: this.vtCode
      }
      getTable(params).then((res) => {
        const datas = res.data
        console.log(datas.data, '?????????')
        // 凭证签章、签名列表 凭证版本列表两个表格数据
        this.tableDataLeft = datas.data
        this.tableDataRight = datas.data[0].stamp_list
      })
    },
    // 导入秘钥
    importHost() {},
    // 连接
    connectHost() {},
    // 断开
    offHost() {},
    // 上下分页
    changePage(type) {
      // 上一页
      if (type === 'left') {
        if (this.page.current == 1) {
          this.$message.error('这是第一页!')
          return
        }
        this.page.current -= 1
        this.codeLists = this.paginate(this.originLists, this.page.current)
        console.log(this.codeLists)
      }
      // 下一页
      if (type === 'right') {
        if (this.page.current == this.page.pages) {
          this.$message.error('这是最后一页!')
          return
        }
        this.page.current += 1
        this.codeLists = this.paginate(this.originLists, this.page.current)
        console.log(this.codeLists)
      }
    },
    // 当前选择行
    highlightRow({row, rowIndex}) {
      console.log(row,rowIndex,this.currentRow);
      if (row.id == this.currentRow) {
        return 'currentRow'
      }
      return ''
    },
    // 点击表格行
    handleRowClick(item, index) {
      this.currentRow = item.id
      const jsonString = JSON.stringify(item, null, 2)
      const divCode = JSON.parse(jsonString).admdivcode
      const year = JSON.parse(jsonString).styear
      const code = JSON.parse(jsonString).vt_code
      const voucherNo = JSON.parse(jsonString).voucher_no
      const params = {
        admDivCode: divCode,
        stYear: year,
        vtCode: code,
        voucherNo: voucherNo
      }
      getTable(params).then((res) => {
        const datas = res.data
        this.tableDataLeft = datas.data
        this.tableDataRight = datas.data[0].stamp_list
      })
    },
    // 假分页
    paginate(dataList, currentPage) {
      // 计算起始索引
      const startIndex = (currentPage - 1) * 10
      // 计算结束索引
      const endIndex = startIndex + 10
      // 返回当前页的数据
      return dataList.slice(startIndex, endIndex)
    },
    // 查看凭证
    showModal() {
      this.visible = true
    },
    // handleOk(e) {
    //   console.log(e, 'handleOk');
    // },
    // 关闭弹窗
    handleCancel(e) {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-table td{
  padding: 6px 0;
}
/deep/.el-table th{
  padding: 6px 0;
}
.el-table .currentRow {
  background-color: #f0f2ff;
}
.welPage {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding-bottom: 30px;
}
.title {
  height: 30px;
  line-height: 30px;
  font-weight: 500;
}
.demo {
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 10px;

  .content {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .select {
      margin-right: 10px;
    }
    .btns {
      margin-right: 10px;
      button {
        margin-right: 10px;
      }
    }
  }
}
.tabLists {
  width: 100%;
  height: auto;
  .tabs {
    background-color: #e6e6fa;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .list-item {
      padding: 0 5px;
      min-width: 75px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #fff;
      cursor: pointer;
    }
    .active {
      background-color: #fff;
    }
  }
}
.list3-content {
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 10px;
  .content-one {
    padding: 0 20px;
    .content {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .select {
        width: 280px;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .labelspan {
          display: inline-block;
          width: 100px;
        }
      }
    }
  }
}
.selectBox {
  width: 150px;
}


.tableLists {
  margin-top: 10px;
  width: 100%;
  min-height: 200px;
  background-color: #fff;
  display: flex;
  padding: 0 10px 20px 10px;
  .left-table {
    // flex: 1;
    width:250px;
    .content {
      width: 100%;
      margin: 0 auto;
      .listss {
        display: flex;
        align-items: center;
      }
    }
    .pages {
      width: 250px;
      margin-top: 5px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .right-table {
    margin-left: 10px;
    // flex: 5;
    width: calc(100% - 270px);
    .tabList {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .list-item {
        padding: 0 5px;
        min-width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #eee;
        cursor: pointer;
      }
      .active {
        background-color: #fff;
      }
    }
    .bottom-table {
      margin-top: 20px;
    }
  }
}
</style>